<template>
  <div class="main ub ub-ver">
    <NavBar title="签到"></NavBar>
    <map class="map" :scale="scale" :max-scale="18" :longitude="longitude" :latitude="latitude" :markers="markers" :circles="circles" :polyline="polyline" show-location @marker-tap="markerTap" />
    <button v-if="selected" class="btn ub ub-pc" hover-class="activeBtn" @click="signIn">确认签到</button>
    <button v-if="customers.length === 0" class="btn ub ub-pc" hover-class="activeBtn" @click="toNoCustomer">查看无坐标客户</button>
  </div>
</template>
<script>
import service from '@/utils/http'
import { errDialog, loading } from '@/utils/util'
const redIcon = '../../static/red.png'
const blueIcon = '../../static/blue.png'
export default {
    filters: {
        numFormat(num) {
            return Number(num).toFixed(2);
        }
    },
    data() {
        return {
            selected: false,
            scale: 15,
            longitude: 116.50,
            latitude: 40.00,
            nocustomers: [],
            customers: [],
            circles: [],
            markers: [],
            polyline: []
        }
    },
    onShow() {
        uni.getLocation({
            type: 'gcj02',
            success: (res) => {
                this.longitude = res.longitude
                this.latitude = res.latitude
                this.getData()
            },
            fail: () => {
                console.log("error")
            }
        })
    },
    methods: {
        getData() {
            const { longitude, latitude } = this
            service.post('/app/cust/getByLatLonDistance', { longitude, latitude }).then(res => {
                this.customers = res.data
                this.markers = this.customers.map((it,index) => {
                    return {
                        id: index,
                        cid: it.id,
                        longitude: it.longitude,
                        latitude: it.latitude,
                        iconPath: redIcon,
                        width: 48,
                        height: 48
                    }
                })
            })
        },
    markerTap(e) {
      const that = this
      const id = e.detail.markerId
      for (let i = 0; i < that.markers.length; i++) {
        const marker = that.markers[i]
        if (marker.id === id && marker.type !== 'route') {
          that.$emit('marker-tap', marker)
          break
        }
      }
    },
        toNoCustomer() {
            uni.navigateTo({
                url: '/pages/bill/nocustomer'
            })
        },
        signIn() {
            const obj = {
                longitude: this.longitude,
                latitude: this.latitude,
                routeId: this.routeId,
                custId: this.custId
            }
            service.post('/app/visit/save', obj).then(res => {
                uni.showToast({title: '签到成功', icon: 'none'})
                uni.navigateBack()
            })
        }
    }
}

</script>
<style scoped>
.main{width: 100%; height: 100%;position: relative;}
.toper{ width: 100%; height: 290rpx;box-sizing: content-box;overflow: hidden;}
.map {
	width: 750upx;
	height: 100vh;
	margin: 0;
	padding: 0;
}
.btn {
  width: 670rpx;
  position: absolute;
  bottom: 40rpx;
  margin-bottom: 0;
  left: 40rpx;
  font-size: 30rpx;
  color: #fff;
  height: 88rpx;
  line-height: 88rpx;
  background: #3387FF;
}
.activeBtn{
  background-color: #5999E1;
}

</style>
